<template>
  <div class="es-input" 
      :class="{ 
        'is-disabled': disabled       
         }">
    <div class="es-input__wrapper" 
      :class="{ 
        'is-focus': isFocus,
        'is-disabled': disabled       
         }">
      <input 
        :value="modelValue" 
        :placeholder="placeholder"
        :type="type"
        :disabled="disabled" 
        :class="{         
          'is-disabled': disabled       
          }"
          class="es-input__inner" 
        @focus="handleFocus" 
        @blur="handleBlur"
        @input="$event => $emit('update:modelValue', ($event.target as HTMLInputElement).value) "
        />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from "vue"

  defineProps({
    modelValue: {
      type: String
    },
    placeholder: {
      type: String
    },
    type: {
      type: String,
      default: 'text'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  })
  const isFocus = ref(false)
  const handleFocus = () => {
    isFocus.value = true
  }
  const handleBlur = () => {
    isFocus.value = false
  }
  defineEmits(['update:modelValue'])
</script>

<style lang="scss" scoped>
.es-input {
  position: relative;
  display: inline-flex;
  height: var(--es-size--default);
  line-height: var(--es-size--default);
  width: 100%; 
  font-size: 14px;  
  box-sizing: border-box;
  vertical-align: middle;
  &.is-diaabled {
    cursor: not-allowed;
  }
  &__wrapper {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    padding: 1px 11px;
    background-color: var(--es-white--color);
    border-radius: var(--es-border-radius-base);
    background-image: none;
    transition: var(--es-transition-box-shadow);
    box-shadow: var(--es-input-box-shadow); 
    &:hover {
      box-shadow: var(--es-input-hover-box-shadow);
    }
    &.is-focus {
      box-shadow: 0 0 0 1px var(--es-default--color);
    }
    &.is-disabled {
      background-color: var(--es-disabled-bg-color);
      box-shadow: 0 0 0 1px var(---es-disabled-border-color) inset;
      cursor: not-allowed;
    }   
  }
  &__inner {
    width: 100%;
    height: 30px;
    line-height: 30px;
    flex-grow: 1;
    padding: 0;
    outline: none;
    border: none;
    background: none;
    box-sizing: border-box;
    &.is-disabled {
      color: var(--es-input-disabled-text-color);
      // css颜色兼容
      -webkit-text-fill-color: var(--es-input-disabled-text-color);
      cursor: not-allowed;
    } 
  }
}
</style>
